<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../css/scroll-bar.css">
    <link rel="stylesheet" href="../css/sub-page.css">
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../lib/nprogress/nprogress.css">
</head>

<body>
    <div class="ok-body">
        <!--面包屑导航区域-->
        <div class="ok-body-breadcrumb">
            <span class="layui-breadcrumb">
                <a><cite>首页</cite></a>
                <a><cite>系统管理</cite></a>
                <a><cite>用户列表</cite></a>
            </span>
            <a class="layui-btn layui-btn-small" href="javascript:location.replace(location.href);" title="刷新">
                <i class="layui-icon layui-icon-refresh"></i>
            </a>
        </div>
        <!--模糊搜索区域-->
        <div class="layui-row ok-search">
            用户名：
            <div class="layui-inline">
                <input class="layui-input" name="id" id="username" autocomplete="off" placeholder="请输入用户名">
            </div>
            <button class="layui-btn" data-type="reload" id="search">搜索</button>
        </div>
        <!--工具栏-->
        <okToolbar>
            <!--   <button class="layui-btn layui-btn-normal" id="batchEnabled">
                <i class="iconfont icon-shangsheng"></i>批量启用
            </button>
            <button class="layui-btn layui-btn-warm" id="batchDisabled">
                <i class="iconfont icon-web-icon-"></i>批量停用
            </button>
            <button class="layui-btn layui-btn-danger" id="batchDel">
                <i class="layui-icon layui-icon-delete"></i>批量删除
            </button> -->
            <button class="layui-btn" id="addUser">
                <i class="layui-icon">&#xe61f;</i>确认选择
            </button>
            <span>共有数据：<i id="countNum">0</i> 条</span>
        </okToolbar>
        <!--数据表格-->
        <table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>
        <input class="layui-hide" id='id' value="">
    </div>
    <!--js逻辑-->
    <script src="../lib/layui/layui.js"></script>
    <script src="../lib/nprogress/nprogress.js"></script>
    <script>
        NProgress.start();
    window.onload = function () {
        NProgress.done();
    }
    layui.use(['element', 'table', 'form', 'jquery'], function () {
        var element = layui.element;
        var table = layui.table;
        var form = layui.form;
        var $ = layui.jquery;

        table.render({
            elem: '#tableId',
            url: '/users/list',
            limit: 10,
            cellMinWidth: 80,
            page: true,
            id:'userlist',
            where:{
                status:1
            },
            cols: [[
                {checkbox: true, fixed: true},
                {field: 'userid', title: 'ID', width: 80, sort: true},
                {field: 'truename', title: '真实姓名'},
                {field: 'username', title: '用户名'},
                {field: 'password', title: '密码'},
                {field: 'status', title: '状态', width: 85, templet: '#statusTpl'},
                {field: 'createat', title: '创建时间'}
            ]],
            done: function (res, curr, count) {
                $("#countNum").text(count);
            }
        });

        var active = {
            reload: function(){
                var username = $('#username');
                
                //执行重载
                table.reload('userlist', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        key: username.val(),
                        status:1
                    }
                });
            }
        };

        $('#search').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        $('#username').on('keydown',function(e){
            if(e.keyCode=='13'){
                $('#search').click();
            }
        });

        
        $("#addUser").click(function () {
             //获取选中的数据行
             var checkStatus = table.checkStatus('userlist');
             var data = checkStatus.data;
             layer.msg(JSON.stringify(data));

             var users=[];
             data.forEach(element => {
                 users.push(element);
             });

           
             window.parent.rendselectedusers(users,$('#id').val());  
             var index =  window.parent.layer.getFrameIndex(window.name);  
             window.parent.layer.close(index); 
        });       
        
    })
</script>
    <!--模板-->
    <script type="text/html" id="statusTpl">
        <a href="javascript:;" title="状态" class="layui-btn layui-btn-xs  {{ d.status== 0? 'layui-bg-orange' : 'layui-bg-green'}} ">
              {{#  if(d.status == 0){ }}
                禁用
              {{#  } }}
              {{#  if(d.status == 1){ }}
                可用
              {{#  } }}
        </a>
   
</script>
</body>

</html>